import React, { useEffect, useState } from 'react'
import { SwipeAction, Toast } from 'antd-mobile'
import "@/assets/css/memoire.scss"
import { useNavigate } from 'react-router-dom';
import { getUserMemos, delUserMemo } from "@/utils/dataUtil"
import { useDispatch } from 'react-redux';
import HeadBack from "@/components/HeadBack"
import deleteImg from "@/assets/images/hospital/delete.png"

import dayjs from "dayjs"

const leftActions = [
    {
        key: 'pin',
        text: <img alt='' src={deleteImg} style={{ width: "0.61rem", height: "0.61rem", maxWidth: "inherit" }} />,
        color: '#F6F7F9',
    },
];

export default function Memoire() {

    const navigate = useNavigate();

    const dispatch = useDispatch();

    //备忘录列表
    const [memoList, setMemoList] = useState([]);

    //点击添加备忘录
    const clickAddMemoBtn = () => {
        navigate("/add_mem", {state: {type: "add"}});
    }

    //点击删除备忘录
    const onItemAction = (val, index) => {
        delUserMemo(index).then(res => {
            if(res.status === 1) {
                //删除成功
                getUserMemos().then(res => {
                    if(res.status !== 1) {return;}
                    setMemoList(res.data);
                    Toast.show({
                        content: "删除成功",
                        position: 'bottom'
                    })
                })
            }
        })
    }

    //点击每一个备忘录item
    const clickMemItem = (item, index) => {
        item["index"] = index;
        dispatch({
            type: "memDetailAction",
            payload: item
        });

        navigate("/add_mem", {
            state: {type: "update"}
        });
    }


    //获取备忘录列表
    useEffect(() => {
        getUserMemos().then(res => {
            if(res.status !== 1) {return;}
            setMemoList(res.data);
        })
    }, [])

    return (
        <div className='memContainer'>
            <HeadBack background={"#FFFFFF"} backTit={""}  isHome="back"></HeadBack>

            <div className='memUl'>
                {/* 每一条备忘录 */}
                {
                    memoList.length === 0 ? (
                        <div className='memEmpty'>- 暂无数据 -</div>
                    ) : (
                        memoList.map((item, index) => (
                            <SwipeAction key={index} leftActions={leftActions} className='memLiAction' onAction={(val) => onItemAction(val, index)}>
                                <div className='memLi' onClick={() => clickMemItem(item, index)}>
                                    <div className='memLiTit'>{item.title}</div>
                                    <div className='memLiTxt'>{item.remark}</div>
                                    <div className='memLiDate memLiTxt'>{dayjs(item.created).format("YYYY年MM月DD日 HH:mm")}</div>
                                </div>
                            </SwipeAction>
                        ))
                    )
                }
            </div>



            {/* 底部的按钮 */}
            <div className='memFoot'>
                <div className='memFootBtn' onClick={clickAddMemoBtn}>添加备忘录</div>
            </div>
        </div>
    )
}
